<!---- SUI模板 on ${DATE} -->
<script ng-init="initCssAndJs()"></script>
<script ng-init="initCss('classification-page/css/classification.css')"></script>
<!--搜索框-->
<div class="bar  bar-nav" style="z-index: 9999;margin-top: -2.2rem">
    <div class="bar bar-header-secondary" style="z-index:99999">
        <div class="pull-left address" style="margin-left: .5rem;margin-top: 0.5rem">
            <div class="col-40 options">
                <span class="fa fa-github-alt">分类</span>
                <select selected="selected" ng-model="firstType" ng-change="getSecondType()"
                        ng-options="x.typeName for x in firstTypeList">
                </select>

            </div>
        </div>
        <div class="searchbar">
            <a class="searchbar-cancel" ng-click="getSearch()">检索</a>

            <div class="search-input">
                <label class="icon icon-search" for="search"></label>
                <input type="search" id='search' ng-model="keyWord" placeholder='输入关键字...'/>
            </div>
        </div>
    </div>
</div>

<div class="scroll-x" ng-init="getFirstType()">
    <div class="scroll-bg">
        <span id="secondSpan" ng-repeat="secondType in secondTypeList">
            <a ng-click="getThirdType(secondType.typeId,$index)"
               ng-class="{'current':$index!=chosedIndex1,'current':$index==chosedIndex1}">{{secondType.typeName}}</a>
        </span>
    </div>
</div>
<div class="scroll-y">
    <div class="left-nav">

        <span ng-repeat="thirdType in thirdTypeList">
             <a ng-click="getClass(thirdType.typeId,$index)"
                ng-class="{'current2':$index!=chosedIndex2,'current2':$index==chosedIndex2}">{{thirdType.typeName}}</a>
        </span>

    </div>
</div>
<div class="content infinite-scroll infinite-scroll-bottom" ng-init="">

    <!-- 右侧内容开始 -->
    <div class="list-block media-list" style="margin-left:3.6rem;margin-top: 3rem;z-index: -1;width: 80%;padding: 0">
        <div class="right-cont">
            <a>
                <ul ng-repeat="class in classLists">
                    <li class="item-content" ng-click="getClassInfo(class.classId)">
                        <div class="item-media">
                            <div class="status">
                                <img ng-if="!class.classImg" ng-src="page/classification-page/img/timg5.jpg">
                                <img ng-if="class.classImg" ng-src="{{class.classImg}}">
                            </div>
                        </div>
                        <div class="item-inner">
                            <div class="item-title-row">
                                <div class="item-title">{{class.classTitle}}</div>
                            </div>
                            <div class="item-subt">{{class.classDetail | cut:true:16:'...' }}</div>
                            <div class="item-foot-row">
                            <span class="item-foot-star" ng-repeat="star in class.postStar track by $index">
                               <i style="color: #ff4056" class="fa fa-star"></i>

                            </span>

                                <div class="item-foot-right-down">{{class.classCount}}人学过</div>
                            </div>

                        </div>
                    </li>

                </ul>
            </a>

        </div>
        <!-- 加载提示符 -->
        <div class="infinite-scroll-preloader">
            <div class="preloader"></div>
        </div>
    </div>
    <!-- <>底部导航 -->

    <!-- 底部bar-->
    <nav class="bar bar-tab">
        <a class="tab-item external " href="#/home">
            <span class="icon icon-home"></span>
            <span class="tab-label">首页</span>
        </a>
        <a class="tab-item active external" href="#">
            <span class="icon icon-app"></span>
            <span class="tab-label">分类</span>
        </a>
        <a class="tab-item external" href="#/reflection">
            <span class="icon icon-message"></span>
            <span class="tab-label">动态</span>
        </a>
        <a class="tab-item external" href="#/individual-center">
            <span class="icon icon-me"></span>
            <span class="tab-label">我的</span>
        </a>
    </nav>
</div>

<div ng-init="suiMobileInit('classification-page/js/classification.js')"></div>